import React, { useState, useMemo, useEffect, useRef } from 'react';
import { Button, Form, Input, Select, Modal, Space } from 'antd';
import { useUnitContext } from '../UnitContext';
const Modalform = (props: any) => {
  const { getisModalOpen, isModalOpens, onClose, data, num } = props;
  const { addTableListItem, editTableItem } = useUnitContext();
  const editdataRef = useRef<any>();
  const [form] = Form.useForm();
  // 父组件调用
  getisModalOpen(form);

  const handleOk = () => {
    form.submit();
    onClose();
  };
  const handleCancel = () => {
    onClose();
  };
  // useEffect(() => {
  //   if (!isModalOpens) {
  //     form.resetFields();
  //   } else {
  //     editdataRef.current = data;
  //     form.setFieldsValue(data);
  //   }
  // }, [isModalOpens]);
  useEffect(() => {
    if (num === 1) {
      form.resetFields();
    } else {
      editdataRef.current = data;
      form.setFieldsValue(data);
    }
  }, [num]);
  // 以下是表单方法
  const { Option } = Select;
  type Currency = 'rmb' | 'dollar';

  interface PriceValue {
    number?: number;
    currency?: Currency;
  }

  interface PriceInputProps {
    value?: PriceValue;
    onChange?: (value: PriceValue) => void;
  }

  const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
    const [number, setNumber] = useState(0);
    const [currency, setCurrency] = useState<Currency>('rmb');

    const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {
      onChange?.({ number, currency, ...value, ...changedValue });
    };

    // eslint-disable-next-line id-length
    const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newNumber = parseInt(e.target.value || '0', 10);
      if (Number.isNaN(number)) {
        return;
      }
      if (!('number' in value)) {
        setNumber(newNumber);
      }
      triggerChange({ number: newNumber });
    };

    const onCurrencyChange = (newCurrency: Currency) => {
      if (!('currency' in value)) {
        setCurrency(newCurrency);
      }
      triggerChange({ currency: newCurrency });
    };

    return (
      <span>
        <Input
          type="text"
          value={value.number || number}
          onChange={onNumberChange}
          style={{ width: 100 }}
        />
        <Select
          value={value.currency || currency}
          style={{ width: 80, margin: '0 8px' }}
          onChange={onCurrencyChange}
        >
          <Option value="rmb">RMB</Option>
          <Option value="dollar">sad</Option>
        </Select>
      </span>
    );
  };

  const onFinish = (values: any) => {
    console.log(66666666, values);
    addTableListItem({ ...values, receiveMode: 0, receiveType: 1 });
    if (editdataRef.current.id) {
      editTableItem(values);
    }
  };

  const checkPrice = (_: any, value: { number: number }) => {
    if (value.number > 0) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('Price must be greater than zero!'));
  };

  return (
    <>
      <Modal title="创建批次" visible={isModalOpens} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="customized_form_controls"
          form={form}
          layout="inline"
          onFinish={onFinish}
          initialValues={
            {
              // price: {
              //   number: 0,
              //   currency: '请选择全宗'
              // }
            }
          }
          style={{ display: 'flex', flexDirection: 'column' }}
        >
          {/* name="receiveType" */}
          {/* name="receiveMode" */}
          <Form.Item style={{ marginBottom: '10px' }}>
            <p>导入类型 : 条目与原文</p>
          </Form.Item>
          <Form.Item
            name="name"
            label="批次名称"
            // rules={[{ validator: checkPrice }]}
            style={{ marginBottom: '10px' }}
          >
            <Input style={{ width: '300px' }} placeholder="请输入名称" />
          </Form.Item>
          <Form.Item
            name="businessType"
            label="导入方式"
            style={{ marginBottom: '10px' }}
            initialValue={1}
          >
            <Select
              placeholder="离线发布"
              options={[{ value: 1, label: '离线发布' }]}
              disabled
              style={{ width: '300px' }}
            ></Select>
          </Form.Item>
          <Form.Item label="选择档案库" style={{ marginBottom: '10px', marginLeft: '-10px' }}>
            <Space wrap>
              <Form.Item name="fondsId" noStyle>
                <Select placeholder="请选择全宗" options={[{ value: 5, label: 'bar' }]} />
              </Form.Item>
              <Form.Item name="archiveTypeId" noStyle>
                <Select placeholder="请选择档案" options={[{ value: 16, label: 'aaa' }]} />
              </Form.Item>
            </Space>
          </Form.Item>
          <Form.Item name="transferUnit" label="来源部门" style={{ marginBottom: '10px' }}>
            <Input style={{ width: '300px' }} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Modalform;
